﻿<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>列表</title>
</head>
<body>
<!---------------------------------- Nav 导航	 -------------------------------------->
<nav class="breadcrumb">
	<i class="Hui-iconfont">&#xe67f;</i> 首页 
	<span class="c-gray en">&gt;</span> 系统信息 
	<span class="c-gray en">&gt;</span> 用户管理
	<!---------------------------------- 页面刷新	--------------------------------------->
	<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" id="btn-refresh">
	 	<i class="Hui-iconfont">&#xe68f;</i>
	</a>
</nav>
<div class="page-container">
	<!-- <div class="text-c">		
	 <span class="select-box inline">
		<select name="" class="select">
			<option value="0">全部分类</option>
			<option value="1">分类一</option>
			<option value="2">分类二</option>
		</select>
		</span> 日期范围：
		<input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'logmax\')||\'%y-%M-%d\'}' })" id="logmin" class="input-text Wdate" style="width:120px;">
		-
		<input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'logmin\')}',maxDate:'%y-%M-%d' })" id="logmax" class="input-text Wdate" style="width:120px;">
		<input type="text" name="" id="" placeholder=" 名称" style="width:250px" class="input-text">
		<button name="" id="" class="btn btn-success" type="submit"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
	</div> -->
	
	<!---------------------------------- 数据增删  -------------------------------------->
	<div class="cl pd-5 bg-1 bk-gray mt-20"> 
		<span class="l">
			<a href="javascript:;" class="btn btn-danger radius" onclick="batchDel()">
				<i class="Hui-iconfont">&#xe6e2;</i> 批量删除
			</a>
			<a class="btn btn-primary radius"  href="javascript:;"  onclick="userAdd('添加用户','/um/toAdd','','580')">
				<i class="Hui-iconfont">&#xe600;</i> 添加数据
			</a>
		</span> 
		<!---------------------------------- 共有x条数据	 -------------------------------------->
		<span class="r">共有数据：<strong th:text="${userList.size()}"></strong> 条</span> 
	</div>
	<div class="mt-20">
		<!----------------------------- Table	 --------------------------------->
		<table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
			<thead>
				<tr class="text-c">
					<th width="25"><input type="checkbox" id="chkAll"></th>
					<th width="80">登录名</th>
					<th width="150">真实姓名</th>
					<th width="120">用户类别</th>
					<th width="120">医生职称</th>
					<th width="120">是否参与排班</th>
					<th width="150">所在科室</th>
					<th width="120">挂号级别</th>
					<th width="120">操作</th>
				</tr>
			</thead>
			<tbody>		
				<tr class="text-c" th:each="user : ${userList}" onclick="setCheckBox(this)">
					<td><input type="checkbox" name="chk" th:value="${user.id}" onclick="stopTrEvent(event)"></td>
					<td th:text="${user.userName}" ></td>
					<td class="text-c" th:text="${user.realName}" ></td>
					<td th:text="${user.useTypeValue}" ></td>
					<td th:text="${user.constantName}" ></td>				
					<td  class="td-status">
						<div th:switch="${user.isScheduling}">					
							<span class="label label-success radius" th:case="是" >是</span>
							<span class="label radius"  th:case="否"  >否</span>
						</div>						
					</td>
					<td th:text="${user.deptName}" ></td>
					<td th:text="${user.registName}" ></td>
				
					<td class="f-14 td-manage">
					
						<!---------------------------------- 修改用户	 -------------------------------------->
						<a style="text-decoration:none" class="ml-5" href="javascript:;" title="修改用户信息"
						   th:data-id="${user.id}"
						   th:onClick="userUpdate('修改','/um/toUpdate',this.getAttribute('data-id'),'500','500')">
							<i class="Hui-iconfont">&#xe6df;</i>
						</a> 
						
						<!-- <a style="text-decoration:none" class="ml-5" 
						th:onClick="|userUpdate('修改用户' , '/um/toUpdate?id='+${user.id})|" href="javascript:;" title="编辑">
							<i class="Hui-iconfont">&#xe6df;</i>
						</a> -->
						
						<!---------------------------------- 修改密码	 -------------------------------------->
						<a style="text-decoration:none" class="ml-5" href="javascript:;" title="修改密码" 
						   th:data-name="${user.userName}"
						   th:onClick="|javascript:pwdUpdate('修改密码','/um/toPassword?userName='+this.getAttribute('data-name'),'400','300')|">
						<i class="Hui-iconfont">&#xe63f;</i>
						</a>
						
						<!---------------------------------- 删除用户	 -------------------------------------->
						<a style="text-decoration:none" class="ml-5" href="javascript:;" title="删除"
							th:data-name="${user.userName}"
							th:onClick="|userDel(this,event,'${user.id}',this.getAttribute('data-name'))|" >
							<i class="Hui-iconfont">&#xe6e2;</i>
						</a>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/lib/My97DatePicker/4.8/WdatePicker.js"></script> 
<script type="text/javascript" src="/lib/datatables/1.10.15/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">

$('.table-sort').dataTable({
	"lengthMenu": [5, 10, 25, 50],//表格左上角下拉菜单
	"order": [ [ 1, "desc" ] ],//默认第几个排序
	"bStateSave": true,//状态保存
	"paging":true,//设置分页状态  true为默认值
	"searching":true,//设置查找状态  true为默认值
	"aoColumnDefs": [
	  //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
	  {"orderable":false,"aTargets":[0,8]}// 不参与排序的列
	]
});

/*用户-添加
 * title: 弹出窗口的标题
 * url: 请求的地址
 * w,h: 窗口宽、高
 */
function userAdd(title,url,w,h){
	layer_show(title,url,w,h);
}

/*用户-修改
 * title: 弹出窗口的标题
 * url: 请求的地址
 * w,h: 窗口宽、高
 */
function userUpdate(title,url,id,w,h){
	var index = layer.open({
		type: 2,
		title: title,
		content: url + "?id=" + id
	});
	layer.full(index);
}

/*用户-密码修改
 * 
 */
function pwdUpdate(title,url,w,h){
	layer_show(title,url,w,h);
}

/*用户-删除
 * 
 * obj: 对象
 * event： 事件
 * id： id
 * userName ： userName
 */
function userDel(obj, e, id, userName){
	//阻止事件向上传递
	stopTrEvent(e);
	//设置当前行checkbox被选中
	var $chk = $(obj).parent().siblings(":first").children("[type=checkbox]");
	//
	var $chks = $("[type=checkbox][name='chk']");
	//var $chks = $("[type=checkbox]");
	for(i=0; i<$chks.length; i++){
		$chks[i].checked = false;
	}
	$('#chkAll').prop("checked",false);
	$chk.prop("checked",true);
	
	var info = "确认要删除"+ userName +"吗？";
	
	batchDel(info);
}

/*用户-批量删除
 * title: 弹出窗口的标题
 * url: 请求的地址
 * w,h: 窗口宽、高
 */
function batchDel(info){
	var $chks = $('[type=checkbox][name="chk"]:checked');
	var ids = new Array();
	
	for(i=0; i<$chks.length; i++){
		ids[i] = $chks[i].value;
	}
	console.log(ids);
	
	//判断是否选择任何一条数据
	if(ids.length == 0){
		layer.alert("请先选择要删除的数据，再执行批量删除！");
		return false; //不执行空删除
	}
	
	if(info == null){
		info = "确认要删除所选的"+ ids.length + "条记录吗？";		
	}
	
	//提交删除
	layer.confirm(info, function(){
		$.ajax({
			type: 'post',
			url: '/um/doDelete',
			data: 'ids=' + ids,
			success:function(result){
				if( result.status == "1"){
					//成功移除页面选中数据的所在行
					for(i=0; i<$chks.length; i++){
						//jq对象使用数据变成js对象需要在$封装
						$($chks[i]).parents("tr").remove();
					}
					layer.msg("所选用户已删除",{
						icon: 1,
						time: 1200
					},function(){
						var index = parent.layer.getFrameIndex(window.name);						
						parent.location.reload();										
					});													
				}
			},
			error:function(result){
				console.log(result.msg);
			}
		});
	});
}

	
	//CheckBox全选控制
	$('#chkAll').click(function(){
		//找到表格内，其他的Checkbox
		var $chks = $('input[name="chk"]');
		
		//设置checkbox的选中和取消状态
		for(index in $chks){
			$chks[index].checked = $(this).prop('checked')
		}
						
	});
	
	
	//当前行Checkbox选择控制
	function setCheckBox(node){
		console.log($(node).children().first().children());
		//取得	行(节点)	的td们(子节点) 	的第一个td		的checkbox
		$chk = $(node).children().first().children();
		//设置第一个td中 checkbox 的 checked 属性
		$chk.prop('checked', !$chk.prop('checked'));
	}
	
	// checkbox点击事件，阻止事件向上传递
	function stopTrEvent(e){
		e.stopPropagation();
	}
<!---------------------------------- 以下为模板提供方法	 -------------------------------------->
/*资讯-添加*/
function article_add(title,url,w,h){
	var index = layer.open({
		type: 2,
		title: title,
		content: url
	});
	layer.full(index);
}

/*资讯-编辑*/
function article_edit(title,url,id,w,h){
	var index = layer.open({
		type: 2,
		title: title,
		content: url
	});
	layer.full(index);
}
/*资讯-删除*/
function article_del(obj,id){
	layer.confirm('确认要删除吗？',function(index){
		$.ajax({
			type: 'POST',
			url: '',
			dataType: 'json',
			success: function(data){
				$(obj).parents("tr").remove();
				layer.msg('已删除!',{icon:1,time:1000});
			},
			error:function(data) {
				console.log(data.msg);
			},
		});		
	});
}

/*资讯-审核*/
function article_shenhe(obj,id){
	layer.confirm('审核文章？', {
		btn: ['通过','不通过','取消'], 
		shade: false,
		closeBtn: 0
	},
	function(){
		$(obj).parents("tr").find(".td-manage").prepend('<a class="c-primary" onClick="article_start(this,id)" href="javascript:;" title="申请上线">申请上线</a>');
		$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已发布</span>');
		$(obj).remove();
		layer.msg('已发布', {icon:6,time:1000});
	},
	function(){
		$(obj).parents("tr").find(".td-manage").prepend('<a class="c-primary" onClick="article_shenqing(this,id)" href="javascript:;" title="申请上线">申请上线</a>');
		$(obj).parents("tr").find(".td-status").html('<span class="label label-danger radius">未通过</span>');
		$(obj).remove();
    	layer.msg('未通过', {icon:5,time:1000});
	});	
}
/*资讯-下架*/
function article_stop(obj,id){
	layer.confirm('确认要下架吗？',function(index){
		$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="article_start(this,id)" href="javascript:;" title="发布"><i class="Hui-iconfont">&#xe603;</i></a>');
		$(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已下架</span>');
		$(obj).remove();
		layer.msg('已下架!',{icon: 5,time:1000});
	});
}

/*资讯-发布*/
function article_start(obj,id){
	layer.confirm('确认要发布吗？',function(index){
		$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="article_stop(this,id)" href="javascript:;" title="下架"><i class="Hui-iconfont">&#xe6de;</i></a>');
		$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已发布</span>');
		$(obj).remove();
		layer.msg('已发布!',{icon: 6,time:1000});
	});
}
/*资讯-申请上线*/
function article_shenqing(obj,id){
	$(obj).parents("tr").find(".td-status").html('<span class="label label-default radius">待审核</span>');
	$(obj).parents("tr").find(".td-manage").html("");
	layer.msg('已提交申请，耐心等待审核!', {icon: 1,time:2000});
}

</script> 
</body>
</html>